<template>
    <div class="wrap">
        <div class="header">
            <div>简历完善度为{{resumeCompleteness}}%<span>（完善可提高录用率）</span></div>
            <div class="edit-btn" @click="goEdit">编辑简历</div>
        </div>
        <div class="textarea-wrap">
            <textarea
                class="textarea"
                v-model="content"
                placeholder="输入自己的优点、特点和上班时间等，能提高被录用的几率哦~">
            </textarea>
            <div class="textarea-tips">
                <div class="phone"></div>
                <div class="number">{{content.length}}/140</div>
            </div>
        </div>
        <div class="theme-btn btn" @click="submit">发送</div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            content: '',
            resumeCompleteness: ''
        };
    },
    methods: {
        submit() {
            const params = this.$getQuery();
            this.$api.jobApply({
                jobId: params.id,
                applyMsg: this.content
            }).then((res) => {
                if (res.code == 0) {
                    wx.redirectTo({ url: '/pages/job/applySuccess/main' });
                }
            });
        },
        goEdit() {
            wx.navigateTo({
                url: '/pages/my/resume/main'
            });
        }
    },
    onShow() {
        this.resumeCompleteness = this.globalData.resumeCompleteness;
        this.content = '';
    }
}
</script>
<style lang="scss" scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #40444C;
    padding: 15px;
    span {
        color: $grey-color;
    }
    border-bottom: 10px solid $grey-bg;
}
.edit-btn {
    width: 70px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    background: $theme-color;
    color: #fff;
    border-radius: 2px;
}
.textarea-wrap {
    position: relative;
}
.textarea {
    width: 345px;
    height: 180px;
    border-radius: 4px;
    border: 1px solid $grey-border-color;
    padding: 15px;
    box-sizing: border-box;
    margin: 15px auto;
    padding-bottom: 30px;
}
.textarea-tips {
    position: absolute;
    left: 0px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    padding: 0px 30px;
    color: $grey-color;
}
.btn {
    margin: 30px 15px;
}
</style>